<template>
  <div class="custom-padding" style="background-color: #f3edea; ">
    <el-container style="width: 100%; height: 100%;">

      <el-header style="height: 70px;">
        <h1 style="font-size: 24px; margin-top: 10px; margin-left: -15px;">Motion Spotter</h1>
      </el-header>
      <el-main style="background-color: #ffffff; border-radius: 12px;">

        <!-- 整个main为一个row，分为3个col -->
        <el-row :gutter='8'>

          <!-- col1 显示步骤-->
          <el-col :span="2">
            <div class="grid-content" style="height: 710px;">
              <div style="height: 610px;">
                <el-steps direction="vertical" :active="step_state">
                  <el-step></el-step>
                  <el-step></el-step>
                  <el-step></el-step>
                </el-steps>
              </div>
            </div>
          </el-col>

          <!-- col2 显示操作文字步骤，以及按钮 -->
          <el-col :span="6">
            <div class="grid-content" style="height: 710px;">

              <!-- 步骤1 -->
              <el-row>
                <div class="grid-content" style="height: 250px;">
                  <h4>Step 1 </h4> 上传视频<br>

                  <el-upload class="upload-demo" drag multiple :action="BASE_API + '/upload'" :on-preview="handlePreview"
                    :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="beforeUpload"
                    :on-success="onSuccess" :limit="5" :on-exceed="handleExceed" :file-list="fileList">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">拖拽文件，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传mp4文件，且不超过500MB</div>
                  </el-upload>

                </div>
              </el-row>

              <!-- 步骤2 -->
              <el-row>
                <div class="grid-content" style="height: 180px;">
                  <h4>Step 2</h4> 选择识别对象
                  <br>
                  <el-select v-model="value" placeholder="请选择需要识别的物体" @change="handleSelectChange">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-row>

              <!-- 步骤3 -->
              <el-row>
                <div class="grid-content" style="height: 180px;">
                  <h4>Step 3</h4>开始执行
                  <br>
                  <el-button :disabled="value === ''" type="primary" @click="recognize">提交</el-button>
                </div>
              </el-row>
            </div>
          </el-col>

          <!-- col3 进度条；LOG信息；下载结果 -->
          <el-col :span="16">
            <div class="grid-content" style="height: 710px;">

              <!-- LOG -->
              <el-row :style="{ height: '400px' }">
                <PrintLog></PrintLog>
              </el-row>

              <!-- 进度条 -->
              <el-row align="middle">
                <GetProcess ref="gp" @processCompleted="handleProcessCompleted"></GetProcess>
              </el-row>

              <!-- 下载结果 -->
              <el-row :gutter='8' :style="{ height: '220px' }">
                <GetResult ref="getResultComponent" :fileName=fileName></GetResult>
              </el-row>

            </div>
          </el-col>
        </el-row>

      </el-main>
      <el-footer>
        <p style="text-align: center; font-size: 12px;">© 2023 西安豪哥科技有限公司版权所有</p>
        <p style="text-align: center; font-size: 12px;">联系邮箱 lihao@leotech.com</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import PrintLog from "@/components/PrintLog.vue";
import GetProcess from "@/components/GetProcess.vue"
import GetResult from "@/components/GetResult.vue"
import recognizeApi from "@/api/requestapi";

export default {
  name: "DemoView",
  components: {
    PrintLog,
    GetProcess,
    GetResult,
  },
  data() {
    return {
      fileList: [],
      BASE_API: process.env.VUE_APP_DEV_BASE_API, // 接口API地址
      fileName: "111",
      progress: 0,
      carNum: "",
      step_state: 0,
      options: [
        { value: "1", label: "车辆" },
        { value: "2", label: "人" },
        { value: "3", label: "动物" },
      ],
      value: "",
      output_video: "",
    };
  },
  methods: {
    handleSelectChange() {
      this.step_state = 2; // el-select改变
    },
    // 提交前校验文件
    beforeUpload(file) {
      const isMP4 = file.type === "video/mp4";
      const isLt500M = file.size / 1024 / 1024 < 500;

      if (!isMP4) {
        this.$message.error("只支持上传 mp4 格式的视频");
        return;
      }
      if (!isLt500M) {
        this.$message.error("上传视频大小不能超过 500MB");
        return;
      }
      const formData = new FormData();
      formData.append("file", file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name} ?`);
    },
    onSuccess(response) {
      this.step_state = 1
      this.$message.success("上传成功，马上体验MOTION SPOTTER视频处理！");
      // 处理后端返回的响应数据
      console.log(response.filename);
      this.fileName = response.filename; // 将文件名赋值给 fileName 属性
    },
    onError(error) {
      this.step_state = 0
      this.$message.error("上传失败");
      // 处理上传失败的逻辑
    },
    recognize() {
      this.step_state = 3;
      recognizeApi
        .sendRecognizeRequest(this.value, this.fileName, this.carNum)
        .then((response) => {
          this.progress = 0;
        });

    },
    openFinish() {
      this.$alert("视频处理完成", "SUCCESSFULLY", {
        confirmButtonText: "确定",
      });
    },
    // 下载结果文件
    download() {
      console.log(this.output_video);
      recognizeApi
        .sendDownloadVideo(this.output_video)
        .then((response) => {
          // 创建一个blob对象
          const blob = new Blob([response.data], { type: "video/mp4" });

          // 创建一个下载链接
          const url = window.URL.createObjectURL(blob);

          // 创建一个虚拟的链接元素并触发点击以下载视频
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = url;
          a.download = "video.mp4";
          document.body.appendChild(a);
          a.click();

          // 释放资源
          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          console.error("下载视频失败", error);
        });
    },
    handleProcessCompleted() {
      // 在这里可以调用第二个组件的方法
      this.$refs.getResultComponent.handleProcessCompleted();
    },
  }
};
</script>


<style>
/* 控制页面padding */
.custom-padding {
  padding: 0 140px;
}

/* 控制当页面宽度小于768px时，padding变为20 */
@media (max-width: 768px) {
  .custom-padding {
    padding: 0 30px;
  }
}

/* 控制上传组件大小 */
.el-icon-upload {
  font-size: 30px;
  margin: 4px 0 2px;
}

/* 控制上传组件大小 */
.el-upload .el-upload-dragger {
  width: 100%;
  height: 70%;
}

.readonly-input {
  overflow: 'visible';
}

.grid-content {
  border-radius: 5px;
  min-height: 36px;
}


.el-header,
.el-footer {
  background-color: #f3edea;
}
</style>
